<template>
	<div class="system" style="height:100%; overflow-y:auto">
		<el-button size="small" type="text" @click="() => addMenu(0)">增加菜单</el-button>
		<!-- <el-button size="mini" icon="el-icon-plus"  @click="() => addMenu(0)">增加菜单</el-button> -->
		<el-tree
			:data="treedata" default-expand-all="true"
			node-key="id"
			:props="treeprops"
			ref="tree"
			accordion
			:expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <i :class="data.source"></i>
        <span>{{data.name}}</span>
        <span>
          <el-button size="mini" type="text" @click="() => addMenu(data.id)">增加子菜单</el-button>
          <el-button v-if="data.id>0" size="mini" type="text" @click=" () => detail(data.id) ">修改</el-button>
          <el-button v-if="data.id>0" size="mini" type="text" @click=" () => remove(data.id) ">删除</el-button>
        </span>
      </span>
		</el-tree>
		<el-dialog :title="detailTitile" :visible.sync="objDetail">
			<avue-form ref="form" v-model="obj" :option="option" @reset-change="emptytChange" @submit="submit"></avue-form>
		</el-dialog>
	</div>
</template>
<script>
	import {getMenuTree, submitMenu, removeMenu, getMenu} from "@/api/system";
	import iconList from "@/config/iconList";
	
	export default {
		data() {
			return {
				treedata: [],
				parentData: [],
				treeprops: {label: 'title'},
				objDetail: false,
				detailTitile: "",
				obj: {},
				option: {
					// tip: false,
					// dialogWidth: "60%",
					// tree: true,
					// border: true,
					// // index: true,
					// selection: true,
					// viewBtn: true,
					emptyText: "取消",
					column: [
						// {
						//   label: "菜单Id",
						//   prop: "id",
						//   display:false,
						// },
						// {
						//   label: "parentId",
						//   prop: "parentId",
						//   // display:false,
						// },
						// {
						//   label: "clientId",
						//   prop: "clientId",
						// },
						{
							label: "菜单名称",
							prop: "name",
							search: true,
							rules: [
								{
									required: true,
									message: "请输入菜单名称",
									trigger: "blur"
								}
							]
						},
						{
							label: "英文名称",
							prop: "nameEng",
						},
						{
							label: "路由地址",
							prop: "path",
							rules: [
								{
									required: true,
									message: "请输入路由地址",
									trigger: "blur"
								}
							]
						},
						{
							label: "菜单图标",
							prop: "source",
							type: "icon",
							valueDefault: "iconfont iconicon_setting",
							slot: true,
							iconList: iconList,
							rules: [
								{
									required: true,
									message: "请输入菜单图标",
									trigger: "click"
								}
							]
						},
						{
							label: "菜单排序",
							prop: "sort",
							type: "number",
							rules: [
								{
									required: true,
									message: "请输入菜单排序",
									trigger: "blur"
								}
							]
						},
						{
							label: "菜单备注",
							prop: "remark",
							type: "textarea",
							span: 24,
							minRows: 6,
							hide: true
						}
					]
				},
				data: []
			};
		},
		
		created: function () {
			this.onLoad();
		},
		methods: {
			submit(form, done) {
				submitMenu(form).then(() => {
					done();
					this.$message({
						type: "success",
						message: "操作成功!"
					});
					this.emptytChange();
					// done();
					this.onLoad();
					
				}, error => {
					done();
					console.log(error);
				});
			},
			emptytChange() {
				this.obj = {};
				this.objDetail = false;
				this.detailTitile = "";
			},
			remove(id) {
				this.$confirm("确定将菜单删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						removeMenu(id).then(() => {
							this.onLoad();
							this.$message({
								type: "success",
								message: "操作成功!"
							});
						});
					})
					.catch(() => {
					});
			},
			detail(id) {
				this.objClean();
				this.detailTitile = "";
				getMenu(id).then(res => {
					this.obj = res.data.data;
					this.detailTitile = this.obj.name;
					this.objDetail = true;
				})
			},
			objClean() {
				for (let key in this.obj) {
					delete this.obj[key]
				}
				let m = {};
				this.obj = m;
			},
			addMenu(parentId) {
				this.objClean();
				this.obj.parentId = parentId;
				this.obj.category = 1;
				this.obj.alias = "menu";
				this.objDetail = true;
				this.detailTitile = "新增菜单";
			},
			onLoad() {
				getMenuTree().then(res => {
					this.treedata = res.data.data;
				})
			}
		}
	};
</script>

<style lang="scss"  >

</style>
